<!--个人中心-->
<template>
  <!--  -->
  <el-card class="user-info-card" style="height: fit-content">

    <template #header>
      <div class="card-header">
        <el-row gutter="20" justify="center">

          <el-col span="6">
            <el-avatar
                :src="`http://120.48.51.66:8081/user/getAvatar?username=${this.userObj.username}`"
                shape="circle"
                size="large"
            />
            <div>
              <span style="margin-left: 20px" class="username">{{ this.userObj.username }}</span>
            </div>
          </el-col>

          <el-row gutter="10">
            <el-tag :key="tag" v-for="tag in this.dynamicTags" closable :disable-transitions="false"
                    @click="changeValue(tag)"
                    @close="handleClose(tag)"
                    class="tag"
            >
              {{ tag }}
            </el-tag>
          </el-row>

          <el-col span="6">
            <el-select
                class="tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                @keyup.enter="handleInputConfirm"
                @change="handleInputConfirm"
            >
              <el-option
                  v-for="item in tagOptions"
                  :key="item"
                  :label="item"
                  :value="item">
                {{ item }}
              </el-option>
            </el-select>
            <el-button v-else class="tag" size="small" @click="showInput">+ New Tag</el-button>
          </el-col>
        </el-row>
      </div>
    </template>

    <el-row gutter="20" class="item" align="middle">
      <el-col span="6">
        <div id="body-head" class="head">
          <span>个人信息</span>
        </div>
      </el-col>
      <el-col span="6">
        <el-button color="#626aef"
                   :dark="isDark"
                   plain @click="changUserInfoVisible=true">修改个人信息</el-button>
      </el-col>
      <el-col span="6">
        <el-button color="#626aef"
                   :dark="isDark"
                   plain @click="go2ChangePassword">修改密码</el-button>
      </el-col>
      <el-col span="6">
        <el-button class="refresh" @click="handleRefresh">刷新</el-button>
      </el-col>
    </el-row>

    <el-descriptions
        class="margin-top"
        :column="1"
        size="large"
        border
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            用户id
          </div>
        </template>
        {{ this.userObj.id }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            余额
          </div>
        </template>
        <div class="btn-connectToWallet">
          <el-button
              v-if="isConnected===false"
              @click="connectToWallet"
              size="small"
              type="warning"
          >连接到钱包
          </el-button>
          <span>{{ this.balance }}</span>
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            邮箱
          </div>
        </template>
        {{ this.userObj.email }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            收款钱包地址
          </div>
        </template>
        <el-button
            v-loading.fullscreen.lock="fullscreenLoading"
            v-if="hasPocket===false"
            @click="setPocketDialog"
            size="small"
            type="warning"
        >
          设置钱包地址
        </el-button>
        {{ this.userObj.pocket }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            实名认证信息
          </div>
        </template>
        <el-button color="#626aef"
                   :dark="isDark"
                   plain @click="realnameVisible=true" size="small"
                   v-if="userObj.isCertified==1"
        >点击查看
        </el-button>
        <el-button type="warning" @click="addIdView=true" size="small"
                   v-if="userObj.isCertified==0">
          实名认证
        </el-button>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 设置钱包地址 -->
    <el-dialog
        v-model="setPocketVisible"
        title="设置钱包地址"
        width="50%"
        style="height: 600px"
        align-center
        class="dialog"
    >
      <el-image class="step1" :src="require('@/assets/addAddressStep1.png')" fit="contain"/>
      <el-image class="step2" :src="require('@/assets/addAddressStep2.png')" fit="contain"/>
      <el-image class="step3" :src="require('@/assets/addAddressStep3.png')" fit="contain"/>
      <el-steps
          :active="3"
          style="top: 40px; position: relative"
      >
        <el-step title="步骤1" description="在插件中切换网络至QCHAIN"/>
        <el-step title="步骤2" description="登录钱包"/>
        <el-step title="步骤3" description="">
          <template v-slot:description>
            <span>红框内即为钱包地址<br/>点击此处即可复制到剪贴板</span>
          </template>
        </el-step>
      </el-steps>
      <el-row justify="space-evenly" align="middle">
        <el-col span="12">
          <el-button
              @click="getPocket"
              type="primary"
              style="margin-left: 50px;margin-top: 50px"
              plain>
            点击获取钱包地址
          </el-button>
        </el-col>
        <el-col span="12" style="display:inline;margin-left: -50px;margin-top: 50px">钱包地址为 {{ this.pocketInput }}
        </el-col>
      </el-row>
      <el-button
          class="but"
          @click="setPocket"
          style="left: 380px;position: relative;margin-top: 30px"
      >
        确认
      </el-button>

    </el-dialog>

    <el-dialog
        v-model="changUserInfoVisible"
        title="修改个人信息" width="50%"
        align-center
        class="dialog"
    >
      <el-form
          label-position="top"
          :rules="changeInfoFormRule"
          label-width="120px"
          :model="changeInfoForm"
          ref="changeInfoFormObj"
      >
        <el-row justify="center">
          <el-form-item label="用户名" prop="usernameInput">
            <el-input v-model="this.changeInfoForm.usernameInput"/>
          </el-form-item>
        </el-row>
        <el-row justify="center">
          <el-form-item label="邮箱" prop="emailInput">
            <el-input v-model="this.changeInfoForm.emailInput"/>
          </el-form-item>
        </el-row>
        <el-row justify="center">
          <el-form-item label="电话号码" prop="telInput">
            <el-input v-model="this.changeInfoForm.telInput"/>
          </el-form-item>
        </el-row>
      </el-form>

      <template #footer>
                 <span class="dialog-footer">
                   <el-button @click="changUserInfoVisible = false">取消</el-button>
                   <el-button color="#626aef"
                              :dark="isDark"
                              plain  @click="updateInfo">
                     确认修改
                   </el-button>
                 </span>
      </template>
    </el-dialog>

    <el-dialog
        v-model="realnameVisible"
        title="实名认证信息"
        align-center
        class="dialog"
    >
      <el-row justify="center" gutter="30">
        <el-col span="12">
          <div>姓名:{{ this.userObj.realName }}</div>
        </el-col>
        <el-col span="12">
          <div>证件号码:{{ this.userObj.citizenId }}</div>
        </el-col>
      </el-row>
      <!--              <el-card class="cardSize">-->
      <!--                -->
      <!--                  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
      <!--                       class="imgsize">-->
      <!--               -->
      <!--                  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
      <!--                       class="imgsize">-->
      <!--               -->
      <!--              </el-card>-->
    </el-dialog>

  </el-card>

  <!--  实名认证对话框-->
  <el-dialog
      v-model="addIdView"
      title="实名认证" width="60%"
      align-center
      class="dialog"
  >
    <el-form
        :model="addForm"
        :rules="addRule"
    >
      <el-form-item class="bottom-but" label="身份证人像面">
        <el-upload
            class="uploadFile"
            action="http://120.48.51.66:8081/user/certify"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-change="handChange0"
            :on-exceed="handleExceed"
            :auto-upload="false"
            :file-list="fileList0"
            show-file-list
        >
          <el-button size="small" color="#626aef"
                     :dark="isDark"
                     plain>点击上传</el-button>
        </el-upload>

      </el-form-item>
      <el-form-item class="bottom-but" label="身份证国徽面">
        <el-upload
            class="uploadFile"
            action="http://120.48.51.66:8081/user/certify"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-change="handChange1"
            :on-exceed="handleExceed"
            :auto-upload="false"
            :file-list="fileList1"
            show-file-list
        >
          <el-button size="small" color="#626aef"
                     :dark="isDark"
                     plain>点击上传</el-button>
        </el-upload>

      </el-form-item>

    </el-form>


    <template #footer>
      <span>
        <el-button class="cancel-but" @click="addIdView=false">取消</el-button>
          <el-button color="#626aef"
                     :dark="isDark"
                     plain @click="makeSure">确认</el-button>
      </span>
    </template>
  </el-dialog>

  <!--  底部轮播-->
  <el-carousel :interval="4000" type="card" height="200px" @change="handleGifChange" style="margin-top: 10px">
    <el-carousel-item>
      <el-card shadow="hover" :body-style="{padding: '0px'}">
        <div class="grid-content grid-con-3">
          <i class="el-icon-plus grid-con-icon" id="icon-income"></i>
          <div class="grid-cont-right">
            <div class="grid-num">{{ this.income }} HNUB</div>
            <div style="margin-top: 10px">今日收益</div>
            <div style="margin-top: 10px">
              <!--                      <el-button class="but3">-->
              <!--                        查看详情-->
              <!--                      </el-button>-->
            </div>
          </div>
        </div>
      </el-card>
    </el-carousel-item>
    <el-carousel-item>
      <el-card shadow="hover" :body-style="{padding: '0px'}">
        <div class="grid-content grid-con-2">
          <i class="el-icon-shopping-cart-1 grid-con-icon" id="icon-trade"></i>
          <div class="grid-cont-right">
            <div class="grid-num">{{ this.tradeNum }}</div>
            <div style="margin-top: 10px">完成交易</div>
            <div style="margin-top: 10px">
              <el-button class="but2" @click="this.$router.push('/tradeRecord')">
                前往查看
              </el-button>
            </div>
          </div>
        </div>
      </el-card>
    </el-carousel-item>
    <el-carousel-item>
      <el-card shadow="hover" :body-style="{padding: '0px'}">
        <div class="grid-content grid-con-1">
          <i class="el-icon-bank-card grid-con-icon" id="icon-upload"></i>
          <div class="grid-cont-right">
            <div class="grid-num">{{ this.nftNum }}</div>
            <div style="margin-top: 10px">已上传作品数量</div>
            <div style="margin-top: 10px">
              <el-button class="but1" @click="this.$router.push('/nft')">
                查看全部
              </el-button>
            </div>
          </div>
        </div>
      </el-card>
    </el-carousel-item>
  </el-carousel>

</template>

<script>
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from 'axios'
import confluxPortal from "@/conflux/conflux-portal";
import {Drip} from "js-conflux-sdk";
import {ContractHnuCoin} from "@/conflux/conflux";
import lottie from 'lottie-web'
import {defineElement} from 'lord-icon-element'
import * as income from '@/assets/453-savings-pig-gradient-edited.json'
import * as trade from '@/assets/981-consultation-gradient-edited.json'
import * as upload from '@/assets/1103-confetti-gradient-edited.json'

defineElement(lottie.loadAnimation)
let userInfoVisible = ref(false)// eslint-disable-line no-unused-vars
export default {
  name: "user-center-info",
  components: {},
  computed: {
    userObj() {
      return JSON.parse(sessionStorage.getItem('userObj'))
    },
  },
  created() {
    this.getincome()
    this.getNftNum()
    this.getTradeNum()
  },
  setup() {
    let hasPocket = ref(false);//是否绑定钱包地址
    if (JSON.parse(sessionStorage.getItem('userObj')).pocket != "" && JSON.parse(sessionStorage.getItem('userObj')).pocket != null) {
      hasPocket = true;
    }
    let dynamicTags = reactive([]);
    let tagCount = ref(0);
    if (JSON.parse(sessionStorage.getItem('userObj')).tag1 != null) {
      dynamicTags.push(JSON.parse(sessionStorage.getItem('userObj')).tag1)
      tagCount.value += 1;
    }
    if (JSON.parse(sessionStorage.getItem('userObj')).tag2 != null) {
      dynamicTags.push(JSON.parse(sessionStorage.getItem('userObj')).tag2)
      tagCount.value += 1;
    }
    if (JSON.parse(sessionStorage.getItem('userObj')).tag3 != null) {
      dynamicTags.push(JSON.parse(sessionStorage.getItem('userObj')).tag3)
      tagCount.value += 1;
    }
    let changUserInfoVisible = ref(false);
    let realnameVisible = ref(false);

    return {
      changUserInfoVisible,
      realnameVisible,
      dynamicTags,
      tagCount,
      hasPocket
    }
  },
  data() {
    return {
      anim: [],

      fullscreenLoading: false,
      //下方卡片
      income: '',
      nftNum: '',
      tradeNum: '',

      // 实名认证
      addIdView: false,
      addForm: [
        {
          front: '',
          negtive: '',
          id: '',
        }
      ],
      currentFile: [],
      fileList0: [],
      fileList1: [],
      addRule: '',

      //设置钱包地址
      pocketInput: '',
      setPocketVisible: false,

      isConnected: false,
      balance: '',
      changeInfoForm: {
        usernameInput: '',
        emailInput: '',
        telInput: ''
      },
      changeInfoFormRule: {
        usernameInput: [{required: true, message: "请输入个人信息", trigger: "blur"}],
        emailInput: [{required: true, message: "请输入邮箱", trigger: "blur"}],
        telInput: [{required: true, message: "请输入电话号码", trigger: "blur"}],
      },
      tagOptions: ['摄影', '绘画', '风景', '人物'],
      inputVisible: false,
      inputValue: '',
      tempTag: '',
      // 是否是重复数据
      isRepeatedData: false,
      // 是否改变原来的值
      isChange: false,
    }
  },
  mounted() {
    this.anim[0] = lottie.loadAnimation({
      container: document.getElementById("icon-income"),
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: income.default,
    })

    this.anim[1] = lottie.loadAnimation({
      container: document.getElementById("icon-trade"),
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: trade.default,
    })
    this.anim[2] = lottie.loadAnimation({
      container: document.getElementById("icon-upload"),
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: upload.default,
    })

    for (let i = 1; i < this.anim.length; i++) {
      this.anim[i].stop()
    }
  },
  methods: {
    /*播放gif*/
    play(index) {
      this.anim[index].play()
    },
    /*停止播放gif*/
    stop(index) {
      this.anim[index].stop()
    },
    handleGifChange(index) {
      this.anim[index].play()
      this.anim[(index + 2) % 3].stop()
    },

    makeSure() {
      let form = new FormData()
      form.append("front", this.fileList0[0].raw)
      form.append("negative", this.fileList1[0].raw)
      form.append("id", this.userObj.id)
      axios.post('http://120.48.51.66:8081/user/certify', form).then((response) => {
        if (response.data.code == 200) {
          ElMessage({
            message: "认证成功",
            type: 'success'
          });
          this.$router.push('/login')


        } else {
          this.$message({
            message: "认证失败",
            type: "error"
          });
        }
      });


    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handChange0(file, fileList) {
      //一旦选中文件，就将该文件添加到currentFile中
      this.currentFile.push(file)
      this.fileList0 = fileList
    },
    handChange1(file, fileList) {
      //一旦选中文件，就将该文件添加到currentFile中
      this.currentFile.push(file)
      this.fileList1 = fileList

    },
    handleExceed() {
      this.$message.warning('只能上传2个文件哦');
    },
    beforeRemove(file) {
      return this.$confirm(`您确定要移除 ${file.name}吗？`);
    },


    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      this.tagCount = this.tagCount - 1;
      console.log(this.dynamicTags)
      let form = new FormData;
      form.append("username", this.userObj.username)
      if (this.dynamicTags.length == 1) {
        form.append("tag1", this.dynamicTags[0])
      } else if (this.dynamicTags.length == 2) {
        form.append("tag1", this.dynamicTags[0])
        form.append("tag2", this.dynamicTags[1])
      }
      console.log(form.get("username"))
      axios.post('http://120.48.51.66:8081/user/setTag', form).then(function (response) {
        if (response.data.code === 200) {
          ElMessage({
            message: '修改成功',
            type: 'success'
          })
          sessionStorage.setItem('userObj', JSON.stringify(response.data.data.userInfo))
        } else {
          ElMessage({
            message: '修改失败',
            type: 'error'
          })
        }
      })
    },

    async handleRefresh() {
      console.log(this.dynamicTags);
      this.account = confluxPortal.getAccount();
      this.balance = Drip(await ContractHnuCoin.contract.balanceOf(this.account)).toCFX() + 'HNUB';
    },

    //连接到钱包
    async connectToWallet() {
      await confluxPortal.enable();
      const account = confluxPortal.getAccount();
      console.log(account);
      if (account === '') {
        this.isConnected = false;
      } else {
        this.isConnected = true;
        this.account = account;
        this.handleRefresh()
      }
    },

    showInput() {
      this.tempTag = ''
      this.inputVisible = true;
      this.inputValue = ''
      this.isChange = false

      // eslint-disable-next-line no-unused-vars
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    go2ChangePassword() {
      this.$router.push('/changePassword')
    },

    handleInputConfirm() {
      this.isRepeatedData = false
      let inputValue = this.inputValue;
      // 去空格 废弃，改为选择框
      inputValue = inputValue.replace(/^\s\s*/, '').replace(/\s\s*$/, '')
      if (inputValue == '') {
        this.inputVisible = false
        return
      }
      // 判断新增的值是否重复
      for (let i = 0; i < this.dynamicTags.length; i++) {
        if (this.dynamicTags[i] == this.inputValue) {
          this.isRepeatedData = true
          this.$message.warning("不允许添加重复数据！")
          return
        }
      }
      this.isRepeatedData = false
      this.isChange = false
      // 判断是否修改原有值，是 替换修改好的值，否新增
      if (this.isChange) {
        this.dynamicTags[this.dynamicTags.indexOf(this.tempTag)] = this.inputValue
        this.inputVisible = false
        return
      }
      // 点击添加时，追加
      if (inputValue) {
        if (this.tagCount == 3) {
          ElMessage.error('只能添加3个标签哦')
          this.inputVisible = false;
          return;
        }
        this.dynamicTags.push(inputValue);
        this.tagCount += 1;
      }
      this.inputVisible = false;
      this.inputValue = '';
      let form = new FormData;
      form.append("username", this.userObj.username)
      if (this.dynamicTags.length == 1) {
        form.append("tag1", this.dynamicTags[0])
      } else if (this.dynamicTags.length == 2) {
        form.append("tag1", this.dynamicTags[0])
        form.append("tag2", this.dynamicTags[1])
      } else {
        form.append("tag1", this.dynamicTags[0])
        form.append("tag2", this.dynamicTags[1])
        form.append("tag3", this.dynamicTags[2])
      }
      axios.post('http://120.48.51.66:8081/user/setTag', form).then(function (response) {
        if (response.data.code === 200) {
          ElMessage({
            message: '修改成功',
            type: 'success'
          })
          sessionStorage.setItem('userObj', JSON.stringify(response.data.data.userInfo))
        } else {
          ElMessage({
            message: '修改失败',
            type: 'error'
          })
        }
      })
    },
    /*changeValue(tag) {
      this.inputVisible = true
      // eslint-disable-next-line no-unused-vars
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
      this.inputValue = tag
      this.tempTag = tag
      this.isChange = true
    },*/
    updateInfo: function () {
      this.fullscreenLoading = true
      let form = new FormData()
      this.$refs.changeInfoFormObj.validate((valid) => {
        if (!valid) {
          ElMessage({
            message: '请填写完整信息',
            type: 'error'
          })
        } else {
          var _t = this
          form.append('userId', this.userObj.id)
          form.append('username', this.changeInfoForm.usernameInput)
          form.append('phone', this.changeInfoForm.telInput)
          form.append('email', this.changeInfoForm.emailInput)
          axios.post('http://120.48.51.66:8081/user/changeInformation', form).then(function (response) {
            _t.fullscreenLoading = false
            if (response.data.code === 200) {
              ElMessage({
                message: '修改成功',
                type: 'success'
              })
              sessionStorage.setItem("userObj", JSON.stringify(response.data.data.userInfo))
              console.log(JSON.stringify(response.data.data))
              _t.changUserInfoVisible = false
            } else {
              ElMessage({
                message: '错误',
                type: 'error'
              })
            }
          })
        }
      })
    },

    setPocketDialog() {
      if (this.account == null || this.account == '') {
        ElMessage({
          message: '请先连接钱包插件',
          type: 'warning'
        })
      } else {
        this.setPocketVisible = true
      }
    },

    getPocket() {
      this.pocketInput = this.account
    },

    setPocket() {
      let form = new FormData()
      if (this.pocketInput == null || this.pocketInput == '') {
        ElMessage({
          message: '请填写完整信息',
          type: 'error'
        })
      } else {
        var _t = this
        form.append('username', this.userObj.username)
        form.append('pocket', this.pocketInput)
        axios.post('http://120.48.51.66:8081/user/setPocket', form).then(function (response) {
          if (response.data.code === 200) {
            ElMessage({
              message: '绑定成功，请重新登录',
              type: 'success'
            })
            _t.setPocketVisible = false
            _t.hasPocket = true
            _t.$router.push('/login')
          } else {
            ElMessage({
              message: '错误',
              type: 'error'
            })
          }
        })
      }
    },

    getincome() {
      axios.get('http://120.48.51.66:8081/trade/getTodayEarning'
          , {
            params: {
              userId: this.userObj.id,
            }
          }).then((response) => {
        if (response.data.code == 200) {
          this.income = response.data.data.earning
        } else {
          this.$message({
            message: "获取今日收益失败",
            type: "error"
          });
        }
      })
    },

    getTradeNum() {
      axios.get('http://120.48.51.66:8081/trade/searchTradeByWorkName'
          , {
            params: {
              userId: this.userObj.id,
              stringPara: '',
              classification: '',
              sort: ''
            }
          }).then((response) => {
        if (response.data.code === 200) {
          this.tradeNum = response.data.data.tradeRecord.length
        } else if (response.data.code == 11000) {
          this.tradeNum = 0
        } else {
          this.$message({
            message: "获取交易失败",
            type: "error"
          });
        }
      })
    },

    getNftNum() {
      axios.get('http://120.48.51.66:8081/work/getNftInfo'
          , {
            params: {
              userId: this.userObj.id,
              stringPara: '',
              status: '',
              classification: ''
            }
          }).then((response) => {
        if (response.data.code == 200) {
          var list = response.data.data.nftList
          this.nftNum = list.length
        } else if (response.data.code == 11100) {
          this.nftNum = 0
        } else {
          this.$message({
            message: "获取nft失败",
            type: "error"
          });
        }
      })
    }
  },
}

</script>

<style scoped>
.margin-top {
  width: 50%;
}

.username {
  font-size: large;
  font-weight: bold;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tag {
  position: relative;
  left: 10px;
  top: 20px
}

.box-card {
  width: 900px;
  position: relative;
  margin-left: 10px;
  margin-top: 10px;
}

.dialog {

}

.item {
  margin-bottom: 18px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 200px;
  background-color: ghostwhite;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 20px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  color: #fff;
}

.el-main {
  background: #d9d9d9;
}

.grid-con-1 .grid-con-icon {
  /*background: #4484ce;*/
}

.grid-con-1 .grid-num {
  color: #4484ce;
}

.but1 {
  width: 200px;
  height: 80px;
  border-radius: 20px;
  background: #4484ce;
  color: white;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 6px;
}

.grid-con-2 .grid-con-icon {
  /*background: #f9cf00;*/
}

.grid-con-2 .grid-num {
  color: #f9cf00;
}

.but2 {
  width: 200px;
  height: 80px;
  border-radius: 20px;
  background: #f9cf00;
  color: white;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 6px;
}

.grid-con-3 .grid-con-icon {
  /*background: #f19f4d;*/
}

.grid-con-3 .grid-num {
  color: #f19f4d;
}

.but3 {
  background: #f19f4d;
}

.imgsize {
  height: 300px;
  width: 600px;
}

.cardSize {
  width: 650px;
}

.step1 {
  top: 20px;
  height: 250px;
  width: 250px;
  position: relative;
  right: 5%;
}

.step2 {
  top: 20px;
  left: 30px;
  height: 250px;
  width: 250px;
}

.step3 {
  top: 20px;
  height: 250px;
  width: 250px;
  position: relative;
  left: 170px;
}

</style>

